<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/animate.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	
	<script type="text/javascript">
			$(function(){
				$("#yourElement").on("click",function(){
					 $("#yourElement").addClass('animated bounce');
					// $('.div1').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){  当动画效果执行完成后添加事件
					// 	$("body").css("background","black")
					// });
					// 有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：
 // setTimeout(function(){
 //        $('#yourElement').removeClass('bounce');
 //    }, 1000);
				})
				
			})
	</script>
</head>
<body>
	<div id="yourElement"></div>

</body>

</html>